<template>
    <div class="profile-container">
      <div class="card">
        <div class="background-image">
          <img src="@/assets/bac/Login-bac.jpg" alt="Background" />
          <div class="profile-avatar">
            <img :src="user.avatarUrl" alt="User Avatar" />
          </div>
        </div>
        <div class="uc-box">
          <MenuComponent :menuItems="menuItems" @itemSelected="handleMenuSelect"/>
          <MainContent :userInfo="userInfo" v-if="userInfo"/>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { userInfoService } from '@/api/user' // 导入API接口
  import MenuComponent from '@/components/Profile/MenuComponent.vue'
  import MainContent from '@/components/Profile/MainContent.vue'
  
  export default {
    components: {
      MenuComponent,
      MainContent
    },
    data() {
      return {
        user: {
          avatarUrl: 'https://example.com/path/to/avatar.jpg', 
        },
        menuItems: ['Profile', 'Settings', 'Notifications', 'Logout'],
        userInfo: null,
      };
    },
    mounted() {
      this.fetchUserInfo();
    },
    methods: {
      async fetchUserInfo() {
        try {
          const response = await userInfoService();
          this.userInfo = response.data; // 这里假设你的API返回的用户信息在data字段中
          console.log('User info:', this.userInfo);
        } catch (error) {
          console.error('Error fetching user info:', error);
        }
      },
      handleMenuSelect(menuItem) {
        console.log('Selected menu item:', menuItem);
        // 在这里执行相应的菜单项选择操作
      }
    }
  };
  </script>
  
  <style scoped>
  .profile-container {
    display: flex;
    justify-content: center;
    padding: 20px;
  }
  
  .card {
    width: 400px;
    border-radius: 15px;
    overflow: hidden; /* 使圆角效果生效 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .background-image {
    position: relative;
    height: 200px;
    overflow: hidden;
  }
  
  .background-image img {
    width: 100%;
    height: auto;
  }
  
  .profile-avatar {
    position: absolute;
    bottom: -50px; /* 头像出现的高度 */
    left: 50%;
    transform: translateX(-50%);
  }
  
  .profile-avatar img {
    width: 100px; /* 头像大小 */
    height: 100px;
    border-radius: 50%; /* 圆形头像 */
    border: 4px solid white; /* 白色边框 */
  }
  
  .uc-box {
    display: flex;
  }
  </style>
  